<template>
  <el-dialog
    class="record-main"
    :visible.sync="isShow"
    :before-close="handleCancelModal"
    :close-on-click-modal="false"
    width="1000px"
  >
    <span slot="title">导入失败日志</span>
    <div v-loading="load">
      <el-table
        class="table-box color-block"
        :data="listData"
        :border="true"
        :stripe="true"
        :empty-text="load ? '正在加载数据' : null"
      >
        <el-table-column prop="created_at" label="导入时间" width="180" />
        <el-table-column prop="index" label="行号" width="120" />
        <el-table-column prop="error" label="错误原因">
          <template slot-scope="item">
            <span class="color-danger">{{ item.row.error }}</span>
          </template>
        </el-table-column>
      </el-table>
      <paginate
        :total="searchParams.total"
        :per-page="searchParams.per_page"
        :page="searchParams.page"
        @paginate-change="handleSearch"
      />
    </div>
  </el-dialog>
</template>

<script>
import Paginate from '@/components/Paginate/index'
import { getImportEditError } from '@/api/goodsImport'

export default {
  name: 'ImportLog',
  components: { Paginate },
  props: {
    'isShow': { type: Boolean, default: true },
    'fileId': { type: Number, default: 0 }
  },
  data: function() {
    return {
      load: true,
      isSubmit: false,
      listData: [],
      searchParams: {
        file_id: 0,
        total: null,
        page: null,
        per_page: 10
      }
    }
  },
  mounted: function() {
    this.searchParams.file_id = this.fileId
    // 初始化方法
    this.initialize()
  },
  methods: {
    // 初始化数据列表
    initialize: function() {
      this.load = true
      getImportEditError(this.searchParams).then(res => {
        this.listData = res.data
        this.searchParams.total = Number(res.total)
        this.searchParams.page = Number(res.current_page)
        this.searchParams.per_page = Number(res.per_page)
        this.$nextTick(function() {
          this.load = false
        })
      })
    },
    // 根据条件筛选数据
    handleSearch: function(value, field) {
      // 重置表单数据
      if (field === 'reset') {
        this.searchParams.page = 1
        this.$refs[value].resetFields()
        // 页码参数变更
      } else if (field) {
        this.searchParams.page = 1
        this.searchParams[field] = value
      }
      this.initialize()
    },
    // 取消弹出框
    handleCancelModal(refresh = false) {
      if (!this.isSubmit) {
        this.$emit('on-cancel-modal', 'logModal', refresh)
      }
    }
  }
}
</script>

<style lang="scss">
.record-main .el-dialog__body {
  padding-top: 2px !important;
  padding-left: 20px !important;
}
.record-main {
  display: flex;
  margin-top: 10px;
  flex-flow: column nowrap;
  padding: 15px 15px 5px 15px;

  .table-button {
    flex-grow: 0;
    .el-button--mini {
      padding: 5px 13px !important;
      margin-bottom: 6px;
    }
  }

  th {
    padding: 0;
    height: 40px;
    line-height: 40px;
    background-color: #f2f2f2;
  }
  td {
    padding: 0;
    height: 38px;
    line-height: 38px;
  }

  .paginate-main {
    flex-grow: 0;
  }
}
</style>
